<template>
  <div class="container">
    <div v-show="extendSwitch" class="extend-container">
      <div v-for="(item,index) in extendContent" :key="index" class="option-items" @click="extendSelected(item.type)">
        <p>{{item.name}}</p>
      </div>
    </div>
    <circle-header :leftType="'TOPICD'" style="position: relative">
       <a slot="right-y" class="more-icon-y iconfont icon-liebiao" @click="openOptions"/>
    </circle-header>
      <div class="content-container">
        <div class="conetnt" style="border-top: 10px #eff1f4 solid">
          <div class="img-title">
            <van-image round class="img" :src="appUrl + topicDetail.authorPoto"/>
            <span>{{topicDetail.authorName}}</span>
          </div>
          <span v-html="$xss(topicDetail.tcontent)"></span>
          <p>{{topicDetail.tagName}}</p>
          <div class="bottom-container">
            <div>
              <span class="iview-icon iconfont icon-liulan"></span>
              <span>{{topicDetail.tviewCount}}</span>
            </div>
            <div class="time">
              <span>{{topicDetail.tcreateDatetime | substringTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="options-container">
        <div @click="clickKeyWord(-1,keyboardSwitch)">
          <span class="iconfont icon-duihua"></span>
          <span>{{options.commentsCount || 0}}</span>
        </div>
        <div @click="likeOptions()">
          <span class="iconfont icon-dianzan" :style="{color: (options.liked ? '#075ebb' : '#999')}"></span>
          <span>{{options.likeCount || 0}}</span>
        </div>
        <div @click="isShowShare = true">
          <span class="iconfont icon-fenxiang"></span>
          <span>{{options.sharesCount || 0}}</span>
        </div>
        <div @click="collectionOptions()">
          <span class="iconfont icon-star" :style="{color: (options.collected ? '#075ebb' : '#999')}"></span>
          <span>{{options.collectCount || 0}}</span>
        </div>
      </div>
      <div class="scroller-container">
        <div class="titile">
          <span>{{$t('circle274')}}</span>
        </div>
        <div class="scroller-content-container"/>
          <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
            <van-list
            v-model="isLoading"
            :finished="finished"
            :finished-text="commentTotal > 10 ? $t('no_more') : ''"
            loding-text="loading"
            @load="getComment"
            style="padding-bottom: 56px;"
            >
              <div class="content-container" style="padding-top: 0;border-bottom: none;" v-for="(item,index) in commentList" :key="index" @click="activeComment(item)">
                <div class="conetnt" style="margin-top: 0;margin:0 16px;border-bottom: 1px #eee solid;padding: 10px 0">
                  <div class="img-title">
                    <van-image round class="img" :src="appUrl + item.usrPhoto"/>
                    <span>{{item.replyName}}</span>
                  </div>
                  <span v-html="$xss(item.tcContent)"></span>
                  <!--底部操作-->
                  <div class="comment-bottom">
                    <div class="comment-option">
                      <div>
                        <i class="iconfont icon-duihua"></i>
                        <span>{{item.commentCount}}</span>
                      </div>
                      <div @click.stop="likeOptions(item)">
                        <i class="iconfont icon-dianzan" :style="{color: (item.liked ? '#075ebb' : '#999')}"></i>
                        <span>{{item.likeCount}}</span>
                      </div>
                      <div v-if="item.tcCreatorEntId === userId" @click.stop="deleteComment(item, 'master')">
                        <i class="iconfont icon-huishouzhan"></i>
                      </div>
                    </div>
                    <div class="comment-desc">
                      <span>{{item.tcStorey}}{{$t('circle275')}}</span>
                      <span>{{item.tcCreateDatetime | substringTime}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
      </div>
    <Comment ref="comment" v-model="comment" style="z-index: 6666;" @changeUserList="selectUser">
      <span class="sendButton" @click="sendComment">{{$t('message_send')}}</span>
    </Comment>
    <van-action-sheet v-model="switchComment" :title="$t('circle280')" :lock-scroll="false" @close="closeChild">
      <div class="action-comment-container" :style="windowHeight">
        <div class="conetnt">
          <div class="img-title">
            <van-image round class="img" :src="appUrl + commentTo.usrPhoto"/>
            <span>{{commentTo.replyName}}</span>
          </div>
          <span v-html="$xss(commentTo.tcContent)"></span>
          <div class="comment-bottom">
            <div class="comment-option">
              <div @click="clickKeyWord(-1,keyboardSwitch)">
                <i class="iconfont icon-duihua"></i>
                <span>{{commentTo.commentCount}}</span>
              </div>
              <div @click="likeOptions(commentTo)">
                <i class="iconfont icon-dianzan" :style="{color: (commentTo.liked ? '#075ebb' : '#999')}"></i>
                <span>{{commentTo.likeCount}}</span>
              </div>
            </div>
            <div class="comment-desc">
              <span>{{commentTo.tcStorey}}{{$t('circle275')}}</span>
              <span>{{commentTo.tcCreateDatetime | substringTime}}</span>
            </div>
          </div>
        </div>
        <div class="comment-scroller">
          <van-pull-refresh v-model="isTopComment" @refresh="onPulldownTopComment" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
            <van-list
            v-model="isLoading"
            :finished="finished"
            :finished-text="(finished&&total>0) ? $t('no_more') : ''"
            loding-text="loading"
            @load="getChildComment"
            style="padding-bottom: 56px;"
            >
              <div class="scroller-content"  v-for="(item,index) in commentChildList" :key="index">
                <div class="img-title">
                  <van-image round class="img" :src="appUrl + item.usrPhoto"/>
                  <div class="title">
                    <p>{{item.replyName}}</p>
                    <p>{{item.tcCreateDatetime | substringTime}}</p>
                  </div>
                </div>
                <div style="padding-left: 12%;padding-top: 5px;font-size: 12px;color: #666">
                  <span v-if="item.tcReplyToEntId !== commentTo.tcCreatorEntId" style="color: rgb(0, 120, 240)">{{$t('learning_history_reply')}} {{item.replyToName}}</span>
                  <span v-html="$xss(item.tcContent)" />
                  <div class="comment-bottom">
                    <div @click="clickKeyWord(item.tcId,keyboardSwitch)">
                      <i class="iconfont icon-duihua"></i>
                    </div>
                    <div v-if="item.tcCreatorEntId === userId" @click="deleteComment(item, 'child')">
                      <i class="iconfont icon-huishouzhan"></i>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </van-action-sheet>
    <common-loading :isLoading="isLoading" style="z-index: 9999"></common-loading>
    <PlayTour ref="playTour" :data="playTour" @playTourSuccessful="playTourSuccessful"></PlayTour>
      <new-select-user :is-show.sync="isShowShare" @changeIdList="selectUserHandle"></new-select-user>
    </div>
</template>
<!--!本页面暂未拆分子组件-->
<script>
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {Dialog, Image, ActionSheet, Toast} from 'vant';
import Comment from '../../../repeatComponents/comment/Comment';
import PlayTour from '@/repeatComponents/playTour/PlayTour';
import NewSelectUser from '../../common/NewSelectUser';
export default {
    name: 'TopicDetail',
    data() {
        return {
            topicId: this.$route.query.id,
            circleId: this.$route.query.circleId,
            topicDetail: {},
            options: {},
            pageNo: 1,
            commentList: [],
            totalPage: 0,
            total: 0,
            onFetching: false,
            isLoading: false,
            optioning: true,
            showcount: false,
            comment: '',
            switchComment: false,
            commentTo: {},
            pageNoChild: 1,
            commentChildList: [],
            commentTotalPage: 0,
            commentTotal: 0,
            isTopComment: false,
            userId: Number(window.localStorage.getItem('loginUser')),
            extendSwitch: false,
            playTourSwitch: false,
            isShowShare: false,
            atUsers: [],
            extendContent: [
                {name: this.$t('circle281'),
                 type: 'play'
                },
                {name: this.$t('circle282'),
                 type: 'search'
                }
            ],
            playTour: {
                code: 'TOPIC',
                dataId: this.$route.query.id,
                localIntegral: 0
            },
            toReplayChild: 0,
            keyboardSwitch: true,
            finished: false,
            isRefresh: false
        };
    },
    components: {
        NewSelectUser,
        CircleHeader,
        Comment,
        [Image.name]: Image,
        [Dialog.Component.name]: Dialog.Component,
        [ActionSheet.name]: ActionSheet,
        PlayTour,
        vanToast: Toast
    },
    mounted() {
        this.getTopicDetail();
        this.getComment();
        this.getOptions();
        this.getUserIntegral();
    },
    computed: {
        windowHeight() {
            return {'height': document.documentElement.clientHeight * 0.80 + 'px'};
        }
    },
    methods: {
        selectUserHandle(userList) {
            if (userList.length > 0) {
                let data = {
                    content: this.topicDetail.tcontent,
                    subject: this.topicDetail.tcontent,
                    recEntIds: userList,
                    mtpId: this.topicDetail.tid,
                    code: this.playTour.code
                };
                this.$axios.post('/app/api/share/save', data).then(res => {
                    this.options.sharesCount++;
                    Toast({message: this.$t('circle_kg_72'), forbidClick: true});
                });
            }
        },
        //获取用户积分
        getUserIntegral() {
            this.$axios({
                url: '/app/credit/user'
            }).then(res => {
                this.playTour.localIntegral = res.data;
            });
        },
        //获取活动详情
        getTopicDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/topic/detail/${this.topicId}`
            }).then(res => {
                this.topicDetail = res.data;
            });
        },
        //获取相关操作情况
        getOptions() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/active-data/${this.topicId}`,
                params: {
                    moduleEnum: this.playTour.code,
                    isComment: false
                }
            }).then(res => {
                this.options = res.data;
            });
        },
        //获取评论列表
        getComment(options) {
            this.isLoading = true;
            this.$axios({
                url: `/app/api/trainee/topic-comment/${this.topicId}`,
                params: {
                    pageNo: this.pageNo,
                    sortName: 'createTime',
                    sortOrder: 'ASC'
                }
            }).then(res => {
                if (options === 'fresh') {
                    this.commentList = res.data.results;
                } else {
                    this.commentList = [...this.commentList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.commentList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        //获取子评论
        getChildComment(options) {
            this.isLoading = true;
            this.$axios({
                url: `/app/api/trainee/topic-comment/comment/${this.commentTo.tcId}`,
                params: {
                    pageNo: this.pageNoChild,
                    sortName: 'createTime',
                    pageSize: 5,
                    sortOrder: 'ASC'
                }
            }).then(res => {
                if (options === 'fresh') {
                    this.commentChildList = res.data.results;
                } else {
                    this.commentChildList = [...this.commentChildList, ...res.data.results];
                }
                this.commentTotall = res.data.totalRecord;
                this.isLoading = false;
                this.pageNoChild++;
                if (this.commentList.length >= this.commentTotal) {
                    this.finished = true;
                }
            });
        },
        //发表评论
        sendComment() {
            this.extendSwitch = false;
            if (this.switchComment) {
                this.sendChildComment();
            } else {
                this.sendMasterComment();
            }
        },
        //父评论发表
        sendMasterComment() {
            if (this.optioning) {
                this.$refs.comment.changeUserList();
                this.optioning = false;
                this.$axios({
                    method: 'POST',
                    url: `/app/api/trainee/topic-comment/${this.topicId}`,
                    data: {
                        atUsers: this.atUsers, //@人员id
                        tcContent: this.comment
                    }
                }).then(() => {
                    this.pageNo = 1;
                    this.getComment('fresh');
                    this.getOptions();
                    this.comment = '';
                    this.$refs.comment.closeComment();
                    this.$refs.comment.clearComment();
                    this.optioning = true;
                    //发布成功提示
                    Toast({message: this.$t('circle279'), forbidClick: true});
                }).catch(() => {
                    this.optioning = true;
                });
            }
        },
        //子评论发表
        sendChildComment() {
            if (this.options) {
                this.$refs.comment.changeUserList();
                this.optioning = false;
                this.$axios({
                    method: 'POST',
                    url: `/app/api/trainee/topic-comment/comment/${this.toReplayChild === 0 ? this.commentTo.tcId : this.toReplayChild}`,
                    data: {
                        atUsers: this.atUsers,
                        tcContent: this.comment
                    }
                }).then(() => {
                    this.pageNoChild = 1;
                    this.getChildComment('fresh');
                    this.$refs.comment.closeComment();
                    this.$refs.comment.clearComment();
                    this.optioning = true;
                    this.comment = '';
                    this.commentTo.commentCount = this.commentTo.commentCount + 1;
                    Toast({message: this.$t('circle279'), forbidClick: true});
                }).catch(() => {
                    this.optioning = true;
                });
            }
        },
        activeComment(item) {
            this.extendSwitch = false;
            this.commentTo = item;
            this.pageNoChild = 1;
            this.switchComment = true;
            this.commentChildList = [];
            this.getChildComment();
        },
        //删除子评论
        deleteComment(item, option) {
            Dialog.confirm({
                width: '180px',
                confirmButtonText: this.$t('mall_10'),
                confirmButtonColor: '#00aeef',
                message: this.$t('circle_kg_6')
            }).then(() =>
                this.$axios({
                    method: 'PUT',
                    url: `/app/api/trainee/topic-comment/${item.tcId}`
                }).then(() => {
                    if (option === 'child') {
                        this.commentChildList.splice(this.commentChildList.indexOf(item), 1);
                        this.commentTo.commentCount = this.commentTo.commentCount - 1 < 0 ? 0 : this.commentTo.commentCount - 1;
                    }
                    if (option === 'master') {
                        let index = this.commentList.indexOf(item);
                        //楼层-1
                        for (let i = 0; i < this.commentList.length; i++) {
                            if (i > index) {
                                this.commentList[i].tcStorey = this.commentList[i].tcStorey - 1 < 1 ? 1 : this.commentList[i].tcStorey - 1;
                            }
                        }
                        this.commentList.splice(index, 1);
                        this.options.commentsCount = this.options.commentsCount - 1 < 0 ? 0 : this.options.commentsCount - 1;
                    }
                    Toast({message: this.$t('circle_kg_7'), forbidClick: true});
                }).catch(err => {
                    Dialog.alert({
                        width: '180px',
                        confirmButtonText: this.$t('mall_10'),
                        confirmButtonColor: '#00aeef',
                        message: err.response.data.errorMsg || err.response.data.errMsg
                    });
                })
            );
        },
        closeChild() {
            this.commentTo = {};
            this.commentChildList = [];
            this.switchComment = false;
        },
        onScrollBottom() {
            if (this.onFetching) {
                return false;
            } else if (this.totalPage <= this.pageNo) {
                return false;
            } else {
                setTimeout(() => {
                    this.pageNo += 1;
                    this.getComment();
                    this.onFetching = true;
                }, 200);
            }
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.commentList = [];
                this.getComment();
                this.isRefresh = false;
            }, 900);
        },
        onPulldownTopComment() {
            this.isTopComment = true;
            setTimeout(() => {
                this.pageNoChild = 1;
                this.commentChildList = [];
                this.getChildComment();
                this.isTopComment = false;
            }, 900);
        },
        // 弹出键盘
        clickKeyWord(id, status) {
            this.extendSwitch = false;
            if (id !== -1) {
                this.toReplayChild = id;
            } else {
                this.toReplayChild = 0;
            }
            if (status) {
                this.$refs.comment.openComment();
            } else {
                this.$refs.comment.closeComment();
            }
            this.keyboardSwitch = !status;
        },
        openOptions() {
            this.extendSwitch = !this.extendSwitch;
        },
        optionPlayTour() {
            this.extendSwitch = false;
            this.$refs.playTour.openPlayTour();
        },
        //@事件
        selectUser(val) {
            this.atUsers = val;
        },
        extendSelected(type) {
            this.extendSwitch = false;
            if (type === 'play') {
                if (this.options.rewarded) {
                    Dialog.alert({
                        width: '180px',
                        confirmButtonText: this.$t('mall_10'),
                        confirmButtonColor: '#00aeef',
                        message: this.$t('circle289', {value: this.options.totalReward}) + '\n' + this.$t('circle292')
                    });
                    return false;
                }
                this.optionPlayTour();
            }
            if (type === 'search') {
                this.$router.push({path: '/circle/search', query: {votId: this.circleId}});
            }
        },
        //点赞
        likeOptions(item) {
            this.extendSwitch = false;
            if (this.optioning) {
                this.optioning = false;
                this.$axios({
                    method: 'POST',
                    url: '/app/api/valuation/like',
                    data: {
                        isLike: item ? !item.liked : !this.options.liked,
                        targetId: item ? item.tcId : this.topicId,
                        typeEnum: this.playTour.code,
                        isComment: !!item
                    }
                }).then(() => {
                    if (item) {
                        item.liked = !item.liked;
                        if (item.liked) {
                            item.likeCount = item.likeCount + 1;
                        } else {
                            item.likeCount = item.likeCount - 1 < 0 ? 0 : item.likeCount - 1;
                        }
                    } else {
                        this.options.liked = !this.options.liked;
                        if (this.options.liked) {
                            this.options.likeCount = this.options.likeCount + 1;
                        } else {
                            this.options.likeCount = this.options.likeCount - 1 < 0 ? 0 : this.options.likeCount - 1;
                        }
                    }
                    this.optioning = true;
                }).catch(() => {
                    this.optioning = true;
                });
            }
        },
        //收藏
        collectionOptions() {
            this.extendSwitch = false;
            if (this.optioning) {
                this.optioning = false;
                let method = 'POST';
                if (this.options.collected) {
                    method = 'DELETE';
                }
                this.$axios({
                    method: method,
                    url: '/app/api/collect',
                    params: {
                        targetId: this.topicId,
                        module: this.playTour.code
                    }
                }).then(() => {
                    this.options.collected = !this.options.collected;
                    if (this.options.collected) {
                        this.options.collectCount = this.options.collectCount + 1;
                    } else {
                        this.options.collectCount = this.options.collectCount - 1 < 0 ? 0 : this.options.collectCount - 1;
                    }
                    this.optioning = true;
                }).catch(() => {
                    this.optioning = true;
                });
            }
        },
        playTourSuccessful() {
            Toast({message: this.$t('circle294'), forbidClick: true});
            this.getUserIntegral();
            this.getOptions();
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.van-action-sheet__header{
    font-size: 12px;
    color: #999;
  }
  /deep/.vue-scroll{
    &::-webkit-scrollbar { /**chrome、safari */
        display: none;
    }
    scrollbar-width: none; /**火狐 */
    -ms-overflow-style: none; /**IE10+ */
  }
  /deep/.van-action-sheet__header{
    line-height: 33px;
  }
  /deep/.van-action-sheet{
    max-height: none;
  }
  /deep/ .scroller-content{
    position: static;
  }
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .scroller-container {
      flex: 1;
      height: 100px;
      .titile{
        padding: 25px 0 5px 16px;
        >span{
          font-size: 12px;
          color: #666;
        }
      }
      .scroller-content-container{
        background-color: #fff;
        padding: 0 16px;
      }
    }
    .options-container{
      display: flex;
      height: 7%;
      padding-left: 16px;
      background-color: #fff;
      >div{
        width: 16.5%;
        margin: 15px;
        border-right: 1px #eee solid;
        &:nth-child(1){
          margin: 15px 20px 15px 5px;
        }
        &:nth-child(4){
          border-right:none
        }
        >span:nth-child(1){
          font-size: 14px;
          color: #999;
        }
        >span:nth-child(2){
          font-size: 12px;
          color: #999;
        }
        .input-hidden{
          position:absolute;
          top: -1000px;
        }
      }
    }
    .content-container{
      border-bottom: 4px #eff1f4 solid;
      background-color: #fff;
      .conetnt{
        display: flex;
        flex-direction: column;
        padding: 10px 16px;
        .comment-bottom{
          display: flex;
          justify-content: space-between;
          .comment-option{
            width: 30%;
            display: flex;
            justify-content: space-between;
            >div>i{
              font-size: 14px;
              color: #ccc;
            }
            >div>span{
              font-size: 12px;
              color: #999;
            }
          }
          .comment-desc{
            width: 45%;
            display: flex;
            justify-content: space-between;
            >span:nth-child(1){
              color: #7098BF;
            }
            >span{
              line-height: 20px;
              font-size: 12px;
              color: #999;
            }
          }
        }
        >span{
          font-size: 12px;
          color: #666;
          padding-bottom: 15px;
        }
        >p{
          display: block;
          width: 50px;
          line-height: 20px;
          text-align: center;
          justify-content: center;
          font-size: 11px;
          color: #fff;
          border-radius: 4px;
          background-color: #97B7D7;
          margin-bottom: 5px;
        }
        .img-title{
          display: flex;
          padding-bottom: 15px;
          .img{
            width: 40px;
            height: 40px;
          }
          >span{
            color: #333;
            line-height: 20px;
            padding-top: 10px;
            padding-left: 10px;
          }
        }
        .bottom-container{
          display: flex;
          justify-content: space-between;
          .time{
            font-size: 12px;
            color: #999;
          }
          .iview-icon{
            font-size: 14px;
            color: #ccc;
          }
          >div>span{
            font-size: 12px;
            color: #999;
            line-height: 20px;
          }
        }
      }

    }
    .sendButton{
      margin: 0;
      font-size: 12px;
      color: #00aeef;
      padding-top: 5px;
    }
    .action-comment-container{
      background-color: #fff;
      border-top: 1px #eee solid;
      display: flex;
      flex-direction: column;
      .conetnt{
        display: flex;
        flex-direction: column;
        padding: 10px 16px;
        .comment-bottom{
          display: flex;
          justify-content: space-between;
          .comment-option{
            width: 30%;
            display: flex;
            justify-content: space-between;
            >div>i{
              font-size: 14px;
              color: #ccc;
            }
            >div>span{
              font-size: 12px;
              color: #999;
            }
          }
          .comment-desc{
            width: 40%;
            display: flex;
            justify-content: space-between;
            >span:nth-child(1){
              color: #7098BF;
            }
            >span{
              line-height: 20px;
              font-size: 12px;
              color: #999;
            }
          }
        }
        >span{
          font-size: 12px;
          color: #666;
          padding-bottom: 15px;
        }
        >p{
          display: block;
          width: 50px;
          line-height: 20px;
          text-align: center;
          justify-content: center;
          font-size: 11px;
          color: #fff;
          border-radius: 4px;
          background-color: #97B7D7;
          margin-bottom: 5px;
        }
        .img-title{
          display: flex;
          padding-bottom: 15px;
          .img{
            width: 40px;
            height: 40px;
          }
          >span{
            color: #333;
            line-height: 20px;
            padding-top: 10px;
            padding-left: 10px;
          }
        }
        .bottom-container{
          display: flex;
          justify-content: space-between;
          .time{
            font-size: 12px;
            color: #999;
          }
          .iview-icon{
            font-size: 14px;
            color: #ccc;
          }
          >div>span{
            font-size: 12px;
            color: #999;
            line-height: 20px;
          }
        }
      }
      .comment-scroller{
        flex: 1;
        height: 100px;
        padding: 0 16px;
        background-color: #eeeeee3d;
        .scroller-content{
          padding-top: 10px;
          .img-title{
           display: flex;
           padding-bottom: 5px;
            .img{
              width: 30px;
              height: 30px;
              flex-shrink: 1;
            }
            .title{
              padding-left: 3%;
            }
            >div>p:nth-child(1){
              font-size: 12px;
            }
            >div>p:nth-child(2){
              font-size: 10px;
              padding-top: 5px;
              color: #ccc;
            }
          }
          .comment-bottom{
            display: flex;
            width: 30%;
            padding-top: 8px;
            justify-content: space-between;
            >div>i{
              font-size: 14px;
              color: #ccc;
            }
            >div>span{
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
  .more-icon-y{
    font-size: 22px;
    // padding: 18px 20px 0 0;
    color: #666 !important;
  }
  .extend-container{
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 56px;
    width: 25%;
    height: 15%;
    .option-items{
      height: 50%;
      border: 1px #eee solid;
      >p{
        line-height: 20px;
        font-size: 12px;
        color: #333;
        text-align: center;
        padding: 17%;
      }
    }
  }
</style>
